<template>
    <views class="sign">
              <viewTitle :title="title_list[0]" :border="true"> </viewTitle>
              <!-- 邀请码 -->
              <div class="Invitation_code_list flex flexR ">
                      <div class="code_logo flex flexC cp">
                             <div class="img"> <img :src="code_img" alt=""  @click="dowmImg(code_img)"></div>
                             <div :style="{width:'250px'}" class="InvitationCode ">邀请码 {{e_inviteCode}}</div>
                      </div>
                      <div class="flow_path flex flexC">
                             <div>第一步：企业需保存专属二维码，发放给待签约的自由职业者;</div>
                             <div>第二步：自由职业者通过微信扫码进入小程序，根据流程完成签约;</div>
                             <div>第三步：企业通过“签约记录”查看签约进度，并协助自由职业者签约;</div>
                             <div>客服电话：{{$config.servicePhone}}</div>
                      </div>
              </div>
              <viewTitle :title="title_list[1]" :border="false"> </viewTitle>
              <div class="article_steps flex ">
                      <div class="article_steps_item  flex flexC">
                             <div class="circle">1</div>
                             <div class="circle_title">获取二维码</div>
                      </div>
                       <div>
                           <el-image
                            style="width: 65px;"
                            :src="require('@/assets/arrow.png')"
                            :fit="'fill'">
                           </el-image>
                       </div>
                       <div class="article_steps_item  flex flexC">
                             <div class="circle">2</div>
                             <div class="circle_title">微信扫码</div>
                      </div>
                       <div>
                           <el-image
                            style="width: 65px;"
                            :src="require('@/assets/arrow.png')"
                            :fit="'fill'">
                           </el-image>
                       </div>                      
                      <div class="article_steps_item  flex flexC">
                             <div class="circle">3</div>
                             <div class="circle_title">企业审查</div>
                      </div>
                      <div>
                          <el-image
                                  style="width: 65px;"
                                  :src="require('@/assets/arrow.png')"
                                  :fit="'fill'">
                          </el-image>
                      </div>
                      <div class="article_steps_item  flex flexC">
                             <div class="circle">4</div>
                             <div class="circle_title">完成签约</div>
                      </div>
              </div>
              <!-- 小提示 -->
              <div class="hint">
                       <div class="hint-title">小提示：</div>
                       <div class="hint-content">自由职业者签约后再对其发放经营所得，有助于企业规避业务风险，确保资金结算过程合法合规，为了您企业的安全稳定发展，请敦促自由职业者进行在线签约。</div>
              </div>
    </views>
</template>


<script>
export default {
       name:"sign",
       data(){
           return  {
               title_list:['使用流程','小程序签约流程'],
               e_inviteCode:'',
               code_img:""
           }
       },
       methods:{
              getInviteCode(){
                     let {code , msg, data} = this.$api.sendSync(this.$mapapi.e_inviteCode);
                     if(code != 200){
                     this.$message.error(msg);
                     return;
                     }
                     this.e_inviteCode = data.invite_code;
                     this.code_img     = data.invite_img;
              },
              // 下载二维码
              dowmImg(url){
                     this.$import_excal(url||'')
              }
       },
       mounted(){
              this.getInviteCode();
                 console.log(this.$route,'路由参数')
       },
       created(){},
}
</script>

<style lang="less"  :scope="true"  src='@/style/personnel/sign.less'>
    
</style>
